import React from 'react'
import './App.css'
import { Outlet, useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

function App() {
  const navigate = useNavigate()
  const location = useLocation()
  const tabs = [
    {
      key: '/app/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/app/xun',
      title: '寻遗',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/app/she',
      title: '社区',
      icon: <MessageOutline />,
    },
    {
      key: '/app/my',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  const handlerTab = (value) => {
    navigate(value)
  }

  const activeKey = tabs.find(item => location.pathname.startsWith(item.key))?.key || '/app/home';

  return (
    <>
      <Outlet></Outlet>
      <TabBar activeKey={activeKey} style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: '#f3f0e7' }} onChange={(value) => { handlerTab(value) }}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  )
}

export default App
